<template>
	<view class="warp">
		<uni-nav-bar background-color="#fff"
		 color="#000" :border="false" :fixed="false"
		  @clickLeft="left"  left-icon="left" 
		   leftWidth="50rpx" rightWidth="10rpx" 
		   :statusBar="true"  
		   >
		   <view class="title_box">
		 	 <view class="left">
				<view class="left_text">
					确认订单
				</view>
			</view>
		 	<view class="right" >
				<!-- 续费与开通记录 -->
		 	</view>
		   </view>
		</uni-nav-bar>
		<view class="cont_box">
			<view class="order_box">
				<view class="cb_top">
					<view class="left_icon">
						<image style="width: 150rpx;height: 180rpx;" :src="productinfo.productCover" mode=""></image>
					</view>
					 <view class="pric">
					 <view class="top">
							{{productinfo.productName}}
					 </view>
					 <view class="p_number">
						 <image style="width: 40rpx;height: 40rpx;" src="/static/images/gold.png" mode=""></image>
					 	<span>{{productinfo.productPrice}}</span>
					 </view>
					 </view>
				</view>
				<view class="warn">
					<span>
					购买内容为虚拟服务内容，
					不支持申请退换，报告有效期为三年，
					购买后生效</span>
				</view>
			</view>
			<view class="profile_box">
				<view class="id_cad">
					<view class="left">
						<span>{{productinfo.masterName}}</span>
					</view>
					<view class="left_gir" v-if="productinfo.masterInfoGirlName">
						<span>{{productinfo.masterInfoGirlName}}</span>
					</view>
				</view>
				<view class="right">
					<view class="button" @click="changeprofil">
						<uni-icons color="#50bcd5" fontFamily="CustomFont" :size="20">{{'\ue629'}}</uni-icons>
						<span>切换档案</span>
					</view>
				</view>
			</view>
			<view class="price_box">
				<view class="title">
					报告金额
				</view>
				<view class="price_old">
					<view class="left">
						现价
					</view>
					<view class="right">
						<image style="width: 40rpx;height: 40rpx;" src="/static/images/gold.png" mode=""></image>
						<span>{{productinfo.productPrice}}</span>
					</view>
				</view>
				<view class="price_card">
					<view class="left">
						<uni-icons color="#ff662e" fontFamily="CustomFont" :size="25">{{'\ue638'}}</uni-icons>
						<span style="margin-left: 10rpx;">卡卷</span>
					</view>
					<view class="right" style="color: #ff662e;">
						<span>减</span>
						<image style="width: 40rpx;height: 40rpx;margin: 0 10rpx;" src="/static/images/gold.png" mode=""></image>
						<span>0</span>
					</view>
				</view>
			</view>
			<!-- 支付方式 -->
			<view class="paystyle">
				<view class="title">
			       支付方式
				</view>
				<view class="paylist">
					<view class="item">
						<view class="left">
							微信支付
						</view>
						<view class="right">
						<uni-icons @click="changepaystyle(1)" v-if="paystyle==0" color="#cecece" type="circle" size="20"></uni-icons>
						<uni-icons v-if="paystyle==1" color="#50bcd5" type="checkbox" size="20"></uni-icons>
						</view>
					</view>
					<view class="item">
						<view class="left">
							<span>金币</span>
							<span style="color: #cecece;margin-left: 20rpx;">余额 {{balancenuber}}</span>
						</view>
						<view class="right">
						<uni-icons @click="changepaystyle(0)" v-if="paystyle==1" color="#cecece" type="circle" size="20"></uni-icons>
						<uni-icons v-if="paystyle==0" color="#50bcd5" type="checkbox" size="20"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 确认按钮 -->
		<view class="bottom_button">
			<view class="left">
				<span>合计:</span>
				<image style="width: 40rpx;height: 40rpx;margin: 0 10rpx;" src="/static/images/gold.png" mode=""></image>
				<span>{{productinfo.productPrice}}</span>
			</view>
			<view class="right">
				<span>已优惠</span>
				<image style="width: 40rpx;height: 40rpx;margin: 0 10rpx;" src="/static/images/gold.png" mode=""></image>
				<span>0</span>
				<view class="button" @click="openfn">
					立即支付
				</view>
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog type="info" cancelText="取消" confirmText="确认" title="提示" content="是否确认支付" 
					@confirm="payorderfn"
						@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				paystyle:0,//支付方式
				productinfo:{},
				personalbar:{},//档案信息信息
				balancenuber:0,//金币余额
				form:{
					payType:'BALANCE',
					payMethod:'balance',
					amount:0,//金额
					productId:null,
					productName:null,
					masterInfoId:null,//个人档案id
					masterName:null,
					masterPhone:null,//手机号码
					// masterInfoGirlId:null,
					// masterInfoGirlName:null,//女方名字
					code:'',
					codeSource:'',
					bankCode:'',
					bankAccount:'',
					
				},
				numberobj:{},//号码
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		onLoad(options) {
			console.log(options);
			if('numberobj' in options){
				let objinfo = JSON.parse(decodeURIComponent(options.numberobj))
				this.productinfo=objinfo
				this.form.productId=objinfo.productId
				this.form.productName=objinfo.productName
				this.form.amount=objinfo.productPrice
				this.form.masterPhone=objinfo.masterPhone
				this.form.masterInfoId=objinfo.masterInfoId
				this.form.masterName=objinfo.masterName
				this.numberobj=objinfo
				  console.log(objinfo);
			}else if('syngobj' in options){
				let syngobj= JSON.parse(decodeURIComponent(options.syngobj))
				this.productinfo=syngobj
				this.form.productId=syngobj.productId
				this.form.productName=syngobj.productName
				this.form.amount=syngobj.productPrice
				this.form.masterPhone=syngobj.masterPhone
				this.form.masterInfoId=syngobj.masterInfoId
				this.form.masterName=syngobj.masterName
				this.form.masterInfoGirlId=syngobj.masterInfoGirlId
				this.form.masterInfoGirlName=syngobj.masterInfoGirlName
			   	console.log(JSON.parse(decodeURIComponent(options.syngobj)))
			}else if('nameobj' in options){
				let nameobj=JSON.parse(decodeURIComponent(options.nameobj))
				this.productinfo=nameobj
				this.form.productId=nameobj.productId
				this.form.productName=nameobj.productName
				this.form.amount=nameobj.productPrice
				this.form.masterPhone=nameobj.masterPhone
				this.form.masterInfoId=nameobj.masterInfoId
				this.form.masterName=nameobj.masterName
				console.log(nameobj);
			}
			 
			 
		},
		onShow() {
			// this.getprofied()
			this.getBlance()
		},
		methods:{
			openfn(){
				this.$refs.alertDialog.open()
			},
			dialogClose(){
				// 取消支付
				this.$refs.alertDialog.close()
			},
			// 确认支付
			payorderfn(){
				 // 判断余额是否足够
				 if(this.form.amount>this.balancenuber){
				this.$modal.msg('余额不足，请充值')
				
				 }else if(!this.form.masterInfoId){
					 this.$modal.msg('请确认购买人信息是否正确')
					
				 }else if(!this.form.productId){
					 this.$modal.msg('请确认产品信息是否正确')
				 }else{
					 // 确认购买
					 this.$request({
					 		 url:'v3/member/front/reportRecharge/recharge',
					 		 method:'POST',
					 		 data:this.form
					 }).then(res=>{
					  if(res.state==200){
					 	 this.$modal.msg('支付成功')
					 	  setTimeout(()=>{
					 		 // 跳转我的报告列表
							 // 根据产品类型跳转详情
							 if(this.numberobj.productType==8 || this.numberobj.productType==7){
								 // 号码测算
								 this.numberobj.phone=this.form.masterPhone
								 uni.navigateTo({
								 	 url:'/pages/moreModule/numerology/numerologyinfo?numberobj='+encodeURIComponent(JSON.stringify(this.numberobj))
								 				 })
							 }else if(this.productinfo.productType==4){
								 let sygnform={
									 api_key:this.productinfo.api_key,
									 male_name:this.productinfo.male_name,//男方姓名
									 male_type:this.productinfo.male_type,//0农历1公历
									 male_year: this.productinfo.male_year, 
									 male_month:this.productinfo.male_month, 
									 male_day: this.productinfo.male_day, 
									 male_hours: this.productinfo.male_hours, 
									 male_minute: this.productinfo.male_minute, 
									 female_name:this.productinfo.female_name,//女方姓名
									 female_type:this.productinfo.female_type,//0农历1公历
									 female_year:this.productinfo.female_year,
									 female_month:this.productinfo.female_month,
									 female_day:this.productinfo.female_day,
									 female_hours:this.productinfo.female_hours,
									 female_minute:this.productinfo.female_minute
								 }
								 uni.navigateTo({
								 	 url:'/pages/moreModule/syngamyinfo/syngamyinfo?syngobj='+encodeURIComponent(JSON.stringify(sygnform))
								 				 })
							 }else if(this.productinfo.productType=='5'){
								 let nameform={
									 name:this.productinfo.name,
									 gender:this.productinfo.gender,
									 year: this.productinfo.year, 
									 month:this.productinfo.month, 
									 day: this.productinfo.day, 
									 hour: this.productinfo.hour, 
									 minute: this.productinfo.minute, 
									 isLeap: this.productinfo.isLeap,
									   
								 }
								 uni.navigateTo({
								 	 url:'/pages/moreModule/name/nameexplain/nameexplain?nameobj='+encodeURIComponent(JSON.stringify(nameform))
								 				 })
							 }
					 		
					 			   },500)
					 	}else{
							this.$modal.msg(res.msg)
						}
					 })
				 }
			},
			// 切换个人信息
			changeprofil(){
				// uni.navigateTo({
				// 	url:'/pages/index/archives'
				// })
			},
			// 
			getprofied(){
				this.$request({url:'v3/member/front/master/detail'}).then(res=>{
					this.personalbar=res.data
					this.form.masterInfoId=this.personalbar.masterInfoId
					this.form.masterName=this.personalbar.masterName
				 
				})
			},
			 
			// 切换支付方式
			changepaystyle(val){
				if(val==1){
					this.$modal.msg('暂不可用')
				}else{
					this.paystyle=val
					this.form.payType='BALANCE'
					this.form.payMethod='balance'
				}
				 
			},
			getBlance(){
					this.$request({
					  url: 'v3/member/front/balanceRecharge/getMemberBalance',
					  method: 'GET'
					}).then(res=>{
						this.balancenuber=res.data.balanceAvailable
					})
			},
			left(){
				uni.navigateBack({delta:1})
			},
		}
	}
</script>
<style>
	page{
		
	}
</style>
<style lang="scss" scoped>
.warp{
	
	.title_box{
		padding: 0 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			display: flex;
			align-items: center;
			.left_text{
				font-size: 30rpx !important;
				margin-right: 10rpx;
				
			}
			.left_icon{
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border: 2rpx solid #323333;
				border-radius: 50%;
				
			}
			
		}
	}
	.cont_box{
		padding: 10rpx 20rpx;
		.order_box{
			background-color: #fff;
			padding: 16rpx;
			border-radius: 20rpx;
			.cb_top{
				display: flex;
				.pric{
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10rpx 0;
					.top{
						font-size: 32rpx;
						font-weight: 550;
						
					}
					.p_number{
						font-size: 28rpx;
						display: flex;
						align-items: center;
						span{
							margin-left: 6rpx;
						}
					}
				}
			}
			.warn{
				padding: 20rpx 10rpx;
				width: 80%;
				color: #cecece;
			}
		}
		.profile_box{
			margin-top: 20rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.id_cad{
				display: flex;
			}
			.left{
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
			   text-align: center;
				font-size: 26rpx;
				background-color: #90c3fe;
				color: #fff;
				border-radius: 50%;
				margin-right: 30rpx;
			}
			.left_gir{
				    width: 80rpx;
					height: 80rpx;
					line-height: 80rpx;
				    text-align: center;
					font-size: 26rpx;
					background-color: #fbb8d3;
					color: #fff;
					border-radius: 50%;
			}
			.right{
				.button{
					padding: 10rpx 30rpx;
					border: 2rpx solid #50bcd5;
					color: #50bcd5;
					border-radius: 42rpx;
					display: flex;
					align-items: center;
				}
			}
		}
		.price_box{
			margin-top: 20rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.title{
				font-size: 32rpx;
				font-weight: 550;
				margin-bottom: 30rpx;
			}
			.price_old,.price_card{
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				.right,.left{
					display: flex;
					align-items: center;
				}
			}
		}
		.paystyle{
			margin-top: 20rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.title{
				font-size: 32rpx;
				font-weight: 550;
				margin-bottom: 20rpx;
			}
			.paylist{
				.item{
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;
				    font-size: 28rpx;
				}
			}
		}
	}
	// 支付
	.bottom_button{
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx;
		.left{
			 display: flex;
			 align-items: center;
		}
		.right{
			display: flex;
			align-items: center;
			.button{
				margin-left: 16rpx;
				padding: 10rpx 20rpx;
				background-color: #ff6277;
				border-radius: 26rpx;
				color: #fff;
			}
		}
		
	}
}
</style>
